<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">可授课日期管理</text>
      <text class="page-subtitle">设置您的可授课时间安排</text>
    </view>

    <!-- 教师类型选择 -->
    <view class="teacher-type-section">
      <text class="section-title">教师类型</text>
      <view class="type-options">
        <view 
          class="type-option" 
          :class="{ active: teacherType === 1 }"
          @tap="selectTeacherType(1)">
          <view class="option-icon">📅</view>
          <view class="option-content">
            <text class="option-title">长期教师</text>
            <text class="option-desc">长期稳定授课，无需设置具体时间</text>
          </view>
        </view>
        <view 
          class="type-option" 
          :class="{ active: teacherType === 2 }"
          @tap="selectTeacherType(2)">
          <view class="option-icon">⏰</view>
          <view class="option-content">
            <text class="option-title">短期教师</text>
            <text class="option-desc">需要设置具体的可授课时间</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 短期教师时间设置 -->
    <view class="time-setting-section" v-if="teacherType === 2">
      <text class="section-title">添加可授课时间</text>

      <!-- 添加模式选择 -->
      <view class="add-mode-section">
        <view class="mode-tabs">
          <view
            class="mode-tab"
            :class="{ active: addMode === 'single' }"
            @tap="switchAddMode('single')">
            <text>单个添加</text>
          </view>
          <view
            class="mode-tab"
            :class="{ active: addMode === 'batch' }"
            @tap="switchAddMode('batch')">
            <text>批量添加</text>
          </view>
        </view>
      </view>

      <!-- 单个添加模式 -->
      <view class="single-add-container" v-if="addMode === 'single'">
        <view class="time-picker-container">
          <view class="picker-row">
            <text class="picker-label">日期：</text>
            <picker mode="date" :value="selectedDate" :start="startDate" :end="endDate" @change="onDateChange">
              <view class="picker-display">
                <text>{{ selectedDate || '选择日期' }}</text>
                <text class="picker-arrow">></text>
              </view>
            </picker>
          </view>

          <view class="picker-row">
            <text class="picker-label">时间：</text>
            <half-hour-picker
              :value="selectedTime"
              placeholder="选择时间"
              @change="onTimeChange" />
          </view>
        </view>

        <button
          class="add-time-btn"
          :disabled="!selectedDate || !selectedTime || isLoading"
          @tap="addSingleAvailableTime">
          {{ isLoading ? '添加中...' : '添加可授课时间' }}
        </button>
      </view>

      <!-- 批量添加模式 -->
      <view class="batch-add-container" v-if="addMode === 'batch'">
        <!-- 日期范围选择 -->
        <view class="date-range-section">
          <text class="sub-title">选择日期范围</text>
          <view class="date-range-picker">
            <view class="picker-row">
              <text class="picker-label">开始日期：</text>
              <picker mode="date" :value="batchStartDate" :start="startDate" :end="endDate" @change="onBatchStartDateChange">
                <view class="picker-display">
                  <text>{{ batchStartDate || '选择开始日期' }}</text>
                  <text class="picker-arrow">></text>
                </view>
              </picker>
            </view>
            <view class="picker-row">
              <text class="picker-label">结束日期：</text>
              <picker mode="date" :value="batchEndDate" :start="batchStartDate || startDate" :end="endDate" @change="onBatchEndDateChange">
                <view class="picker-display">
                  <text>{{ batchEndDate || '选择结束日期' }}</text>
                  <text class="picker-arrow">></text>
                </view>
              </picker>
            </view>
          </view>
        </view>

        <!-- 星期选择 -->
        <view class="weekday-section">
          <text class="sub-title">选择星期</text>
          <view class="weekday-options">
            <view
              class="weekday-option"
              v-for="(day, index) in weekdays"
              :key="index"
              :class="{ active: selectedWeekdays.includes(index) }"
              @tap="toggleWeekday(index)">
              <text>{{ day }}</text>
            </view>
          </view>
        </view>

        <!-- 时间段选择 -->
        <view class="time-slots-section">
          <text class="sub-title">选择时间段</text>
          <view class="time-slots-container">
            <view class="time-slot-input">
              <view class="picker-row">
                <text class="picker-label">开始时间：</text>
                <half-hour-picker
                  :value="batchStartTime"
                  placeholder="选择开始时间"
                  @change="onBatchStartTimeChange" />
              </view>
              <view class="picker-row">
                <text class="picker-label">结束时间：</text>
                <half-hour-picker
                  :value="batchEndTime"
                  placeholder="选择结束时间"
                  :start-time="batchStartTime || '00:00'"
                  @change="onBatchEndTimeChange" />
              </view>
            </view>
            <button class="add-slot-btn" @tap="addTimeSlot" :disabled="!batchStartTime || !batchEndTime">
              添加时间段
            </button>
          </view>

          <!-- 已添加的时间段 -->
          <view class="added-slots" v-if="batchTimeSlots.length > 0">
            <text class="slots-title">已添加的时间段：</text>
            <view class="slot-list">
              <view
                class="slot-item"
                v-for="(slot, index) in batchTimeSlots"
                :key="index">
                <text class="slot-time">{{ slot.startTime }} - {{ slot.endTime }}</text>
                <button class="remove-slot-btn" @tap="removeTimeSlot(index)">删除</button>
              </view>
            </view>
          </view>
        </view>

        <!-- 批量添加按钮 -->
        <button
          class="batch-add-btn"
          :disabled="!canBatchAdd || isBatchLoading"
          @tap="batchAddAvailableTime">
          {{ isBatchLoading ? '批量添加中...' : `批量添加 (${calculateBatchCount()}个时间)` }}
        </button>
      </view>
    </view>

    <!-- 已设置的时间列表 -->
    <view class="time-list-section" v-if="teacherType === 2">
      <text class="section-title">已设置的可授课时间</text>
      
      <view class="time-list" v-if="availableTimes.length > 0">
        <view 
          class="time-item" 
          v-for="(item, index) in availableTimes" 
          :key="index">
          <view class="time-info">
            <text class="time-date">{{ formatDate(item.teacherAvailableTime) }}</text>
            <text class="time-time">{{ formatTime(item.teacherAvailableTime) }}</text>
          </view>
          <button 
            class="delete-btn" 
            @tap="deleteAvailableTime(item.teacherAvailableTime)">
            删除
          </button>
        </view>
      </view>
      
      <view class="empty-state" v-else>
        <text class="empty-text">暂无可授课时间</text>
        <text class="empty-hint">请添加您的可授课时间安排</text>
      </view>
    </view>

    <!-- 长期教师申请 -->
    <view class="long-term-section" v-if="teacherType === 1">
      <!-- 申请状态显示 -->
      <view class="application-status" v-if="longTermApplication.hasApplication">
        <view class="status-header">
          <view class="status-icon" :class="getStatusIconClass()">
            {{ getStatusIcon() }}
          </view>
          <view class="status-content">
            <text class="status-title">长期教师申请状态</text>
            <text class="status-desc" :class="getStatusClass()">{{ longTermApplication.statusDesc }}</text>
          </view>
        </view>

        <view class="status-details" v-if="longTermApplication.auditComment">
          <text class="details-title">审核意见：</text>
          <text class="details-content">{{ longTermApplication.auditComment }}</text>
        </view>

        <view class="status-time" v-if="longTermApplication.applyTime">
          <text class="time-label">申请时间：</text>
          <text class="time-value">{{ formatDateTime(longTermApplication.applyTime) }}</text>
        </view>

        <view class="status-time" v-if="longTermApplication.auditTime">
          <text class="time-label">审核时间：</text>
          <text class="time-value">{{ formatDateTime(longTermApplication.auditTime) }}</text>
        </view>
      </view>

      <!-- 申请按钮或提示 -->
      <view class="application-action">
        <button
          v-if="!longTermApplication.hasApplication || longTermApplication.auditStatus === 2"
          class="apply-btn"
          :disabled="isApplying"
          @tap="applyForLongTerm">
          {{ isApplying ? '申请中...' : '申请成为长期教师' }}
        </button>

        <view v-else-if="longTermApplication.auditStatus === 0" class="waiting-tip">
          <view class="tip-icon">⏳</view>
          <view class="tip-content">
            <text class="tip-title">申请审核中</text>
            <text class="tip-desc">您的长期教师申请正在审核中，请耐心等待</text>
          </view>
        </view>

        <view v-else-if="longTermApplication.auditStatus === 1" class="success-tip">
          <view class="tip-icon">✅</view>
          <view class="tip-content">
            <text class="tip-title">长期教师</text>
            <text class="tip-desc">恭喜！您已成为长期教师，学生可以随时预约您的课程</text>
          </view>
        </view>
      </view>

      <!-- 长期教师说明 -->
      <view class="long-term-info">
        <text class="info-title">长期教师说明：</text>
        <view class="info-list">
          <text class="info-item">• 无需设置具体的可授课时间</text>
          <text class="info-item">• 学生可以随时预约您的课程</text>
          <text class="info-item">• 需要通过管理员审核</text>
          <text class="info-item">• 审核通过后即可享受长期教师权益</text>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <button 
      class="save-btn" 
      :disabled="isSaving"
      @tap="saveTeacherType">
      {{ isSaving ? '保存中...' : '保存设置' }}
    </button>
  </view>
</template>

<script>
import { teacherApi } from '@/api/teacher.js'
import HalfHourPicker from '../../components/time-picker/half-hour-picker.vue'

export default {
  components: {
    HalfHourPicker
  },
  data() {
    return {
      teacherType: 2, // 1: 长期教师, 2: 短期教师，默认为短期

      // 单个添加相关
      selectedDate: '',
      selectedTime: '',

      // 批量添加相关
      addMode: 'single', // 'single' | 'batch'
      batchStartDate: '',
      batchEndDate: '',
      batchStartTime: '',
      batchEndTime: '',
      selectedWeekdays: [], // 选中的星期
      batchTimeSlots: [], // 批量添加的时间段
      weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],

      // 长期教师申请相关
      longTermApplication: {
        hasApplication: false,
        auditStatus: null, // 0: 待审核, 1: 通过, 2: 拒绝
        statusDesc: '未申请',
        auditComment: '',
        applyTime: null,
        auditTime: null
      },

      // 通用数据
      startDate: '',
      endDate: '',
      availableTimes: [],
      isLoading: false,
      isBatchLoading: false,
      isSaving: false,
      isApplying: false,
      userInfo: null
    }
  },

  computed: {
    // 是否可以批量添加
    canBatchAdd() {
      return this.batchStartDate &&
             this.batchEndDate &&
             this.selectedWeekdays.length > 0 &&
             this.batchTimeSlots.length > 0
    }
  },

  onLoad() {
    this.initData()
  },

  onShow() {
    // 每次显示页面时刷新数据
    this.loadAvailableTimes()
  },

  methods: {
    // 初始化数据
    initData() {
      // 获取用户信息
      try {
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo) {
          this.userInfo = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }

      // 设置日期范围
      this.setDateRange()

      // 加载已有的可授课时间
      this.loadAvailableTimes()

      // 加载长期教师申请状态
      this.loadLongTermApplicationStatus()
    },

    // 设置日期选择范围
    setDateRange() {
      const now = new Date()
      this.startDate = this.formatDateOnly(now)
      
      const endDate = new Date()
      endDate.setMonth(endDate.getMonth() + 3) // 3个月内
      this.endDate = this.formatDateOnly(endDate)
    },

    // 选择教师类型
    selectTeacherType(type) {
      this.teacherType = type
      if (type === 1) {
        // 长期教师，清空时间列表
        this.availableTimes = []
      }
    },

    // 切换添加模式
    switchAddMode(mode) {
      this.addMode = mode
      // 清空相关数据
      if (mode === 'single') {
        this.selectedDate = ''
        this.selectedTime = ''
      } else {
        this.batchStartDate = ''
        this.batchEndDate = ''
        this.batchStartTime = ''
        this.batchEndTime = ''
        this.selectedWeekdays = []
        this.batchTimeSlots = []
      }
    },

    // 批量添加相关方法
    onBatchStartDateChange(e) {
      this.batchStartDate = e.detail.value
      // 如果结束日期早于开始日期，清空结束日期
      if (this.batchEndDate && this.batchEndDate < this.batchStartDate) {
        this.batchEndDate = ''
      }
    },

    onBatchEndDateChange(e) {
      this.batchEndDate = e.detail.value
    },

    onBatchStartTimeChange(timeStr) {
      this.batchStartTime = timeStr
      console.log('选择批量开始时间:', timeStr)

      // 如果结束时间早于或等于开始时间，清空结束时间
      if (this.batchEndTime && this.batchEndTime <= timeStr) {
        this.batchEndTime = ''
      }
    },

    onBatchEndTimeChange(timeStr) {
      this.batchEndTime = timeStr
      console.log('选择批量结束时间:', timeStr)
    },

    // 切换星期选择
    toggleWeekday(index) {
      const idx = this.selectedWeekdays.indexOf(index)
      if (idx > -1) {
        this.selectedWeekdays.splice(idx, 1)
      } else {
        this.selectedWeekdays.push(index)
      }
      this.selectedWeekdays.sort()
    },

    // 添加时间段
    addTimeSlot() {
      if (!this.batchStartTime || !this.batchEndTime) {
        uni.showToast({
          title: '请选择开始和结束时间',
          icon: 'none'
        })
        return
      }

      if (this.batchStartTime >= this.batchEndTime) {
        uni.showToast({
          title: '结束时间必须晚于开始时间',
          icon: 'none'
        })
        return
      }

      // 检查是否重复
      const exists = this.batchTimeSlots.some(slot =>
        slot.startTime === this.batchStartTime && slot.endTime === this.batchEndTime
      )

      if (exists) {
        uni.showToast({
          title: '该时间段已存在',
          icon: 'none'
        })
        return
      }

      this.batchTimeSlots.push({
        startTime: this.batchStartTime,
        endTime: this.batchEndTime
      })

      // 清空选择
      this.batchStartTime = ''
      this.batchEndTime = ''
    },

    // 删除时间段
    removeTimeSlot(index) {
      this.batchTimeSlots.splice(index, 1)
    },

    // 计算批量添加的时间数量
    calculateBatchCount() {
      if (!this.canBatchAdd) return 0

      const startDate = new Date(this.batchStartDate)
      const endDate = new Date(this.batchEndDate)
      const dayCount = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1

      let count = 0
      for (let i = 0; i < dayCount; i++) {
        const currentDate = new Date(startDate)
        currentDate.setDate(startDate.getDate() + i)
        const weekday = currentDate.getDay()

        if (this.selectedWeekdays.includes(weekday)) {
          count += this.batchTimeSlots.length
        }
      }

      return count
    },

    // 日期选择
    onDateChange(e) {
      this.selectedDate = e.detail.value
    },

    // 时间选择
    onTimeChange(timeStr) {
      // 半小时选择器直接传递时间字符串
      this.selectedTime = timeStr
      console.log('选择时间:', timeStr)
    },

    // 添加单个可授课时间
    async addSingleAvailableTime() {
      if (!this.selectedDate || !this.selectedTime) {
        uni.showToast({
          title: '请选择日期和时间',
          icon: 'none'
        })
        return
      }

      // 组合日期和时间
      const dateTimeStr = `${this.selectedDate} ${this.selectedTime}:00`
      const dateTime = new Date(dateTimeStr)

      // 检查时间是否已过
      if (dateTime <= new Date()) {
        uni.showToast({
          title: '不能选择过去的时间',
          icon: 'none'
        })
        return
      }

      // 检查是否重复
      const exists = this.availableTimes.some(item => {
        const existingTime = new Date(item.teacherAvailableTime)
        return existingTime.getTime() === dateTime.getTime()
      })

      if (exists) {
        uni.showToast({
          title: '该时间已存在',
          icon: 'none'
        })
        return
      }

      this.isLoading = true

      try {
        const res = await teacherApi.addAvailableTime({
          userId: this.userInfo.id,
          availableTime: dateTimeStr,
          status: 2 // 短期教师
        })

        if (res && res.code === 200) {
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
          
          // 重新加载列表
          await this.loadAvailableTimes()
          
          // 清空选择
          this.selectedDate = ''
          this.selectedTime = ''
        } else {
          throw new Error(res.message || '添加失败')
        }
      } catch (error) {
        console.error('添加可授课时间失败:', error)
        uni.showToast({
          title: error.message || '添加失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },

    // 批量添加可授课时间
    async batchAddAvailableTime() {
      if (!this.canBatchAdd) {
        uni.showToast({
          title: '请完善批量添加信息',
          icon: 'none'
        })
        return
      }

      this.isBatchLoading = true

      try {
        // 生成所有的时间点
        const availableTimes = []
        const startDate = new Date(this.batchStartDate)
        const endDate = new Date(this.batchEndDate)
        const dayCount = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1

        for (let i = 0; i < dayCount; i++) {
          const currentDate = new Date(startDate)
          currentDate.setDate(startDate.getDate() + i)
          const weekday = currentDate.getDay()

          if (this.selectedWeekdays.includes(weekday)) {
            const dateStr = this.formatDateOnly(currentDate)

            for (const slot of this.batchTimeSlots) {
              const startDateTime = `${dateStr} ${slot.startTime}:00`
              const endDateTime = `${dateStr} ${slot.endTime}:00`

              // 检查时间是否已过
              if (new Date(startDateTime) > new Date()) {
                availableTimes.push(startDateTime)
              }
            }
          }
        }

        if (availableTimes.length === 0) {
          uni.showToast({
            title: '没有有效的未来时间',
            icon: 'none'
          })
          return
        }

        // 调用批量添加API
        const res = await teacherApi.batchAddAvailableTime({
          userId: this.userInfo.id,
          availableTimes: availableTimes,
          status: 2 // 短期教师
        })

        if (res && res.code === 200) {
          uni.showToast({
            title: `成功添加${availableTimes.length}个时间`,
            icon: 'success'
          })

          // 重新加载列表
          await this.loadAvailableTimes()

          // 清空批量添加数据
          this.batchStartDate = ''
          this.batchEndDate = ''
          this.selectedWeekdays = []
          this.batchTimeSlots = []

          // 切换回单个添加模式
          this.addMode = 'single'
        } else {
          throw new Error(res.message || '批量添加失败')
        }
      } catch (error) {
        console.error('批量添加可授课时间失败:', error)
        uni.showToast({
          title: error.message || '批量添加失败',
          icon: 'none'
        })
      } finally {
        this.isBatchLoading = false
      }
    },

    // 加载可授课时间列表
    async loadAvailableTimes() {
      if (!this.userInfo || !this.userInfo.id) {
        return
      }

      try {
        const res = await teacherApi.getAvailableTimes({
          userId: this.userInfo.id
        })

        if (res && res.code === 200) {
          this.availableTimes = res.data || []
          
          // 根据是否有时间数据判断教师类型
          if (this.availableTimes.length === 0) {
            // 可能是长期教师或者还没设置
            // 这里可以根据实际业务逻辑调整
          }
        }
      } catch (error) {
        console.error('加载可授课时间失败:', error)
      }
    },

    // 删除可授课时间
    async deleteAvailableTime(availableTime) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个可授课时间吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await teacherApi.removeAvailableTime({
                userId: this.userInfo.id,
                availableTime: availableTime
              })

              if (result && result.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                
                // 重新加载列表
                await this.loadAvailableTimes()
              } else {
                throw new Error(result.message || '删除失败')
              }
            } catch (error) {
              console.error('删除可授课时间失败:', error)
              uni.showToast({
                title: error.message || '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },

    // 加载长期教师申请状态
    async loadLongTermApplicationStatus() {
      if (!this.userInfo || !this.userInfo.id) {
        return
      }

      try {
        const res = await teacherApi.getLongTermApplicationStatus({
          userId: this.userInfo.id
        })

        if (res && res.code === 200) {
          this.longTermApplication = res.data

          // 如果已经是审核通过的长期教师，默认选择长期教师类型
          if (this.longTermApplication.auditStatus === 1) {
            this.teacherType = 1
          }
        }
      } catch (error) {
        console.error('加载长期教师申请状态失败:', error)
      }
    },

    // 申请成为长期教师
    async applyForLongTerm() {
      this.isApplying = true

      try {
        const res = await teacherApi.applyForLongTerm({
          userId: this.userInfo.id
        })

        if (res && res.code === 200) {
          uni.showToast({
            title: '申请提交成功',
            icon: 'success'
          })

          // 重新加载申请状态
          await this.loadLongTermApplicationStatus()
        } else {
          throw new Error(res.message || '申请失败')
        }
      } catch (error) {
        console.error('申请长期教师失败:', error)
        uni.showToast({
          title: error.message || '申请失败',
          icon: 'none'
        })
      } finally {
        this.isApplying = false
      }
    },

    // 获取申请状态图标
    getStatusIcon() {
      switch (this.longTermApplication.auditStatus) {
        case 0: return '⏳'
        case 1: return '✅'
        case 2: return '❌'
        default: return '❓'
      }
    },

    // 获取申请状态图标样式类
    getStatusIconClass() {
      switch (this.longTermApplication.auditStatus) {
        case 0: return 'status-pending'
        case 1: return 'status-approved'
        case 2: return 'status-rejected'
        default: return 'status-unknown'
      }
    },

    // 获取申请状态样式类
    getStatusClass() {
      switch (this.longTermApplication.auditStatus) {
        case 0: return 'status-pending-text'
        case 1: return 'status-approved-text'
        case 2: return 'status-rejected-text'
        default: return 'status-unknown-text'
      }
    },

    // 保存教师类型设置
    async saveTeacherType() {
      this.isSaving = true

      try {
        // 这里可以调用API保存教师类型
        // 暂时只显示成功提示
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('保存设置失败:', error)
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      } finally {
        this.isSaving = false
      }
    },

    // 格式化日期（仅日期部分）
    formatDateOnly(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },

    // 格式化日期显示
    formatDate(dateTimeStr) {
      const date = new Date(dateTimeStr)
      const month = date.getMonth() + 1
      const day = date.getDate()
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const weekday = weekdays[date.getDay()]
      return `${month}月${day}日 ${weekday}`
    },

    // 格式化时间显示
    formatTime(dateTimeStr) {
      const date = new Date(dateTimeStr)
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${hours}:${minutes}`
    },

    // 格式化日期时间显示
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return ''
      const date = new Date(dateTimeStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 10rpx;
}

.page-subtitle {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

/* 教师类型选择 */
.teacher-type-section {
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.type-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.type-option {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.type-option.active {
  border-color: #667eea;
  background-color: #f8f9ff;
}

.option-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.option-content {
  flex: 1;
}

.option-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.option-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

/* 时间设置区域 */
.time-setting-section {
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

/* 添加模式选择 */
.add-mode-section {
  margin-bottom: 30rpx;
}

.mode-tabs {
  display: flex;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 6rpx;
}

.mode-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #666;
  transition: all 0.3s ease;
}

.mode-tab.active {
  background-color: #667eea;
  color: white;
  font-weight: bold;
}

/* 批量添加容器 */
.batch-add-container {
  margin-top: 20rpx;
}

.date-range-section,
.weekday-section,
.time-slots-section {
  margin-bottom: 30rpx;
}

.sub-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

/* 星期选择 */
.weekday-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.weekday-option {
  padding: 16rpx 24rpx;
  background-color: #f8f8f8;
  border: 2rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #666;
  transition: all 0.3s ease;
}

.weekday-option.active {
  background-color: #667eea;
  border-color: #667eea;
  color: white;
}

/* 时间段输入 */
.time-slots-container {
  margin-bottom: 20rpx;
}

.time-slot-input {
  margin-bottom: 16rpx;
}

.add-slot-btn {
  width: 100%;
  height: 70rpx;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.add-slot-btn:disabled {
  background-color: #cccccc;
}

/* 已添加的时间段 */
.added-slots {
  margin-top: 20rpx;
}

.slots-title {
  font-size: 26rpx;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
}

.slot-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.slot-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx;
  background-color: #f0f8ff;
  border-radius: 8rpx;
  border: 1rpx solid #d6e4ff;
}

.slot-time {
  font-size: 26rpx;
  color: #333;
}

.remove-slot-btn {
  padding: 8rpx 16rpx;
  background-color: #ff4757;
  color: white;
  border: none;
  border-radius: 6rpx;
  font-size: 22rpx;
}

/* 批量添加按钮 */
.batch-add-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.batch-add-btn:disabled {
  background: #cccccc;
}

.time-picker-container {
  margin-bottom: 30rpx;
}

.picker-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  width: 100%;
}

.picker-label {
  font-size: 28rpx;
  color: #333;
  width: 140rpx;
  flex-shrink: 0;
  text-align: left;
}

.picker-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  border: 1rpx solid #e0e0e0;
  width: 160rpx;
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
}

.add-time-btn {
  width: 100%;
  height: 80rpx;
  background-color: #667eea;
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.add-time-btn:disabled {
  background-color: #cccccc;
}

/* 时间列表 */
.time-list-section {
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.time-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f9ff;
  border-radius: 12rpx;
  border: 1rpx solid #e8e9ff;
}

.time-info {
  flex: 1;
}

.time-date {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 4rpx;
}

.time-time {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.delete-btn {
  padding: 12rpx 24rpx;
  background-color: #ff4757;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60rpx 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  display: block;
  margin-bottom: 10rpx;
}

.empty-hint {
  font-size: 24rpx;
  color: #ccc;
  display: block;
}

/* 长期教师申请区域 */
.long-term-section {
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

/* 申请状态显示 */
.application-status {
  margin-bottom: 30rpx;
}

.status-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.status-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.status-icon.status-pending {
  background-color: #fff7e6;
}

.status-icon.status-approved {
  background-color: #f6ffed;
}

.status-icon.status-rejected {
  background-color: #fff2f0;
}

.status-content {
  flex: 1;
}

.status-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.status-desc {
  font-size: 26rpx;
  display: block;
}

.status-pending-text {
  color: #fa8c16;
}

.status-approved-text {
  color: #52c41a;
}

.status-rejected-text {
  color: #ff4d4f;
}

.status-details {
  background-color: #f8f9fa;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
}

.details-title {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 8rpx;
}

.details-content {
  font-size: 26rpx;
  color: #333;
  display: block;
}

.status-time {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.time-label {
  font-size: 24rpx;
  color: #666;
  width: 120rpx;
}

.time-value {
  font-size: 24rpx;
  color: #333;
}

/* 申请操作区域 */
.application-action {
  margin-bottom: 30rpx;
}

.apply-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.apply-btn:disabled {
  background: #cccccc;
}

.waiting-tip,
.success-tip {
  display: flex;
  align-items: center;
  padding: 24rpx;
  border-radius: 12rpx;
}

.waiting-tip {
  background-color: #fff7e6;
  border: 1rpx solid #ffd591;
}

.success-tip {
  background-color: #f6ffed;
  border: 1rpx solid #b7eb8f;
}

.tip-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.tip-content {
  flex: 1;
}

.tip-title {
  font-size: 28rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.waiting-tip .tip-title {
  color: #fa8c16;
}

.success-tip .tip-title {
  color: #52c41a;
}

.tip-desc {
  font-size: 24rpx;
  color: #666;
  display: block;
}

/* 长期教师说明 */
.long-term-info {
  background-color: #f8f9fa;
  padding: 24rpx;
  border-radius: 12rpx;
  border-left: 4rpx solid #667eea;
}

.info-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-item {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

/* 保存按钮 */
.save-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}

.save-btn:disabled {
  background: #cccccc;
}
</style>
